<template>
 <!-- 卡片 -->
   <el-card>
     <!-- 面包屑导航 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row type="flex" justify="end" style="margin: 20px 0">
      <el-col :span="22">
        <el-form :inline="true">
            <el-form-item label="文章分类">
              <el-select placeholder="请选择分类" v-model="query.cate_id" size="small">
                <!-- label是展示给用户看的
                value是提交给后台的 -->
                  <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="发布状态">
              <el-select placeholder="请选择状态" v-model="query.state" size="small">
                <el-option label="已发布" value="已发布"></el-option>
                <el-option label="草稿" value="草稿"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="getArtList">筛选</el-button>
              <el-button size="small" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"><el-button size="mini" type="primary" @click="showPublish">发表文章</el-button></el-col>
    </el-row>
   <!-- <pre>
      {{cateList}}
   </pre> -->
    <!-- 文章列表表格 -->
    <el-table :data="artList" border stripe>
      <el-table-column label="文章标题">
        <template #default="{row}">
          <el-link type="primary" @click="getArtInfo(row.id)">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类"></el-table-column>
      <!-- 如果过滤器处理列的数据展示 需要使用插槽来完成 -->
      <el-table-column  label="发表时间">
        <template #default="{row}">
          {{ row.pub_date | formatTime }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          {{row.id}}
          <el-button type="danger" size="small" @click="delArt(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
     <!---->
      <!--
        current-page 当前页码
        page-size 每页条数
        page-sizes 下拉梳理选择
        total总数
        layout分页布局展示
        @size-change 每页条数发生变化后触发的方法
        @current-change 页码发生变化后触发的方法
       -->
     <el-pagination
      :current-page="query.pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange" >
    </el-pagination>
    <!-- 预览文章 -->
    <el-dialog
        top="5vh"
        title="文章预览"
        :visible="showDialogVisible"
        width="70%"
        @close="showDialogVisible = false"
       >
       <!-- 文章预览区域的结构,抽离了子组件 -->
        <ArtInfo :artInfo="artInfo"></ArtInfo>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showDialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>

      <!-- 发布文章的对话框
      :before-close 这个是对话框关闭前的回调 点击x会触发before-close
      @close 对话框关闭时的回调
      -->
      <el-dialog
        title="发布文章"
        :visible="showPublishDialogVisible"
        fullscreen
        :before-close="closePublish"
        destroy-on-close
       >
       <!-- 新增文章的内容子组件 -->
       <ArtPub @closeDialog="publishFinished"></ArtPub>
      </el-dialog>
   </el-card>
</template>

<script>
import { reqDelArticleById, reqGetArtInfo, reqGetArtList } from '@/api/article'
import { mapState } from 'vuex'
import ArtInfo from './components/ArtInfo.vue'
import ArtPub from './components/ArtPub.vue'
export default {
  components: { ArtInfo, ArtPub },
  name: 'ListPage',
  data () {
    return {
      // 获取文章列表的查询参数
      query: {
        pagenum: 1, // 页码
        pagesize: 2, // 每页条数
        cate_id: '', // 查询文章分类
        state: '' // 查询文章状态
      },
      artList: [], // 文章列表
      total: 0, // 文章总数
      showDialogVisible: false, // 预览文章控制显示对话框的布尔值
      artInfo: {}, // 查询文章信息
      showPublishDialogVisible: false // 控制发布文章的对话框的布尔值
    }
  },
  computed: {
    ...mapState('article', ['cateList'])
  },
  created () {
    this.getArtList()
    // 获取文章分类 渲染下拉列表
    this.$store.dispatch('article/getCateList')
  },
  methods: {
    // 获取文章列表
    async getArtList () {
      const { data } = await reqGetArtList(this.query)
      this.artList = data.data // 文章列表数据
      this.total = data.total // 总数
    },
    // 重置
    reset () {
      // 将 查询文章分类 查询文章状态 字段清空重新获取文章列表
      this.query.cate_id = this.query.state = ''
      this.getArtList()
    },
    // 每页条数发生变化后触发的方法
    handleSizeChange (newSize) {
      // console.log('最新每页条数是' + newSize)
      // 将最新的size赋值 重新获取列表
      this.query.pagesize = newSize
      this.getArtList()
    },
    // 页码发生变化后触发的方法
    handleCurrentChange (newPage) {
      // console.log('最新页码' + newPage)
      // 将最新的pagenum赋值 重新获取列表
      this.query.pagenum = newPage
      this.getArtList()
    },
    // 根据id获取文章信息显示对话框
    async getArtInfo (id) {
      this.showDialogVisible = true
      const { data } = await reqGetArtInfo(id)
      this.artInfo = data.data
    },
    // 删除文章
    async delArt (id) {
      // 1. 确认消息框
      const str = await this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (str !== 'confirm') return this.$message.info('已取消操作')
      // 2. 发送删除的请求
      const { data } = await reqDelArticleById(id)
      // 3. 提示
      if (data.code !== 0) return this.$message.error(data.message)
      this.$message.success(data.message)
      // 小bug
      if (this.artList.length === 1 && this.query.pagenum > 1) {
        this.query.pagenum--
      }
      // 4. 重新渲染
      this.getArtList()
    },
    // 展示新增文章对话框
    showPublish () {
      this.showPublishDialogVisible = true
    },
    // 关闭发布文章对话框
    async closePublish () {
      console.log('点击了x, 出发了beforeclose事件')
      const str = await this.$confirm('此操作将永久退出新增文章, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (str !== 'confirm') return this.$message.info('已取消操作')
      this.showPublishDialogVisible = false
    },

    publishFinished () {
      // 关闭发布文章对话框
      this.showPublishDialogVisible = false
      // 重新获取文章列表
      this.getArtList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-table {
  margin: 20px 0;
  /deep/.el-table__header-wrapper {
    .cell {
      color: #000 !important;
    }
  }
}

</style>
